<template>
  <div class="article">
    <ContentBox title="内容详情" @left="back" :fixed="true" titlecolor="black">
      <template slot="oleft"><van-icon color="#000" size=".48rem" name="arrow-left"/></template>
      <template slot="oright"><van-icon color="#000" size=".48rem" name="share" @click="share" v-if="canShowShare"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')" class="not"></notice>
    <van-swipe v-if="detail.sys_publisher != 0 && detail.social_image && detail.social_image.length > 0" @change="onChange" :width="$remToPx(7.5)" :height="$remToPx(6.26)" loop class="imgswipper">
      <van-swipe-item v-for="(item, index) in detail.social_image" :key="index">
        <van-image :src="item.image" fit="scale-down" :width="$remToPx(7.5)" :height="$remToPx(6.26)">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error></template>
        </van-image>
      </van-swipe-item>
    </van-swipe>
    <div v-else class="detail_content" v-html="detail.content"></div>
    <div class="auther_info">
      <van-image
        round
        width=".72rem"
        height=".72rem"
        fit="cover"
        :src="detail.author && detail.author.avatar"
      />
      <div class="username">
        <p>{{detail.author && detail.author.nickname}}</p>
        <span>{{detail.create_time}}</span>
      </div>
      <div class="jb" @click="dojb(route.params.id)">举报</div>
    </div>
    <div class="good_info" v-if="detail.product !== ''" @click="toDetail(detail.product.id)">
      <van-image
        width="1rem"
        height="1rem"
        fit="cover"
        :src="detail.product.image"
      />
      <div class="info">
        <span class="van-ellipsis">{{detail.product.store_name}}</span>
        <p>￥{{detail.product.price}}</p>
      </div>
    </div>
    <div class="fwb_text" v-if="detail.type === 1" v-html="detail.content"></div>
    <div class="pl_content">
      <div class="pltitle">全部评论</div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="loadMore"
        class="pllist"
        :immediate-check="false"
        v-if="pllist.length > 0"
      >
        <div class="plitem" v-for="(item, index) in pllist" :key="index">
          <div class="user_info">
            <van-image
              round
              width=".48rem"
              height=".48rem"
              fit="cover"
              :src="item.author.avatar"
            />
            <div class="user_name">
              <span>{{item.author.nickname}}</span>
              <p>{{item.create_time}}</p>
            </div>
            <div class="jb" @click="dojb(item.author.uid)">举报</div>
          </div>
          <p class="item_content">{{item.content}}</p>
          <van-divider />
        </div>
      </van-list>
      <div class="nomore" v-else>暂无评论</div>
    </div>
    <div class="societyvideoFooter">
      <div @click="plshow = true" class="plinp">我来说两句...</div>
      <div @click="dolike">
        <van-icon name="like-o" size=".48rem" :color="detail.social_user_like_status_count ? '#FF2A1F' : '#333333'"/>
        <span class="num">{{detail.social_like_count}}</span>
      </div>
      <div @click="plshow = true">
        <van-icon name="chat-o" size=".48rem" color="#333333"/>
        <span class="num">{{detail.comment && detail.comment.length}}</span>
      </div>
    </div>
    <van-action-sheet v-model="plshow" title="发评论">
      <van-field
        v-model="plvalue"
        rows="3"
        autosize
        type="textarea"
        placeholder="我来说点..."
        maxlength="250"
        show-word-limit
        class="plinpu"
      />
      <div class="plsendbtn">
        <span @click="plshow = false">取消</span>
        <span class="send" @click="sendpl">发送</span>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current: 0,
      detail: '',
      last_page: 100,
      pllist: [],
      loading: false,
      finished: false,
      plshow: false,
      plvalue: '',
      page: 1,
      canShowShare: ''
    }
  },
  methods: {
    back () {
      if (this.$route.query.from) {
        this.$router.go(-1)
      } else {
        if (this.$store.state.pl === 'H5') {
          this.$router.go(-1)
        } else if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.finish()
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('popVC')
        }
      }
    },
    onChange (index) {
      this.current = index
    },
    getDetail () {
      this.$axios.get(`/api/social/detail/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.detail = res.data
          this.$shareInit(this.detail.cover, this.detail.content, this.detail.content, window.location.href)
        }
      })
    },
    loadMore () {
      if (this.page >= this.last_page) {
        this.loading = false
        this.finished = true
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.$axios.get(`/api/social/getSocialComment/${this.$route.params.id}`, {
          params: {
            page: this.page
          }
        }).then(res => {
          if (res.status === 200) {
            this.last_page = res.data.last_page
            this.pllist = this.pllist.concat(res.data.data)
          }
          this.loading = false
          this.finished = true
        })
      })
    },
    dolike () {
      this.$axios.post('/api/user/sociallike', {
        social_id: this.detail.id
      }).then(res => {
        if (res.status === 200) {
          this.$dialog({ message: res.msg })
          if (this.detail.social_user_like_status_count > 0) {
            this.detail.social_user_like_status_count = 0
            this.detail.social_like_count--
          } else {
            this.detail.social_user_like_status_count = 1
            this.detail.social_like_count++
          }
        }
      })
    },
    dojb (id) {
      this.$dialog.confirm({
        title: '提示',
        message: '是否举报该用户'
      }).then(_ => {
        this.$axios.get(`/api/social/report_social_comment/${id}`).then(_ => {
          this.$dialog({ message: '举报成功' })
        })
      })
    },
    getPLList () {
      this.$axios.get(`/api/social/getSocialComment/${this.$route.params.id}?_=${Math.random() * Math.random()}`).then(res => {
        if (res.status === 200) {
          this.last_page = res.data.last_page
          this.pllist = res.data.data
        }
      })
    },
    sendpl () {
      if (this.plvalue === '') {
        this.$dialog({ message: '请输入评论内容' })
        return false
      } else {
        this.$axios.post('/api/social/comment', {
          social_id: this.$route.params.id,
          content: this.plvalue,
          to_user_id: 0,
          parent_id: 0
        }).then(res => {
          if (res.status === 200) {
            this.plvalue = ''
            this.page = 1
            this.getPLList()
            this.detail.comment.length++
            this.$toast('评论成功')
            this.plshow = false
          }
        })
      }
    },
    share () {
      if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.onClickShare()
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('onClickShare')
      }
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    }
  },
  created () {
    this.getDetail()
    this.getPLList()
    if (this.$store.state.pl === 'ANDROID') {
      window.showShareBtn = _ => {
        this.canShowShare = true
      }
    } else if (this.$store.state.pl === 'IOS') {
      window.iosRegisterHandler('showShareBtn').then(_ => {
        this.canShowShare = true
      })
    } else {
      if (!this.$isWxBrowser()) {
        this.canShowShare = true
      }
    }
  }
}
</script>

<style lang="scss">
.article{
  background: #f0f0f0;
  height: 100%;
  padding-top: 1.36rem;
  .not{
    position: fixed;
    top: .88rem;
    left: 0;
    width: 100%;
  }
  .van-swipe{
    padding-top: 1.36rem;
    background: #000000;
    .custom-indicator{
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .detail_content{
    border-radius: 0 0 .16rem .16rem;
    background: #ffffff;
    color: #333333;
    font-size: .3rem;
    padding: .5rem .24rem;
  }
  .auther_info{
    border-radius: .16rem;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: .36rem .24rem;
    margin-top: .24rem;
    .username{
      flex: 1;
      margin-left: .12rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p{
        font-size: .28rem;
        font-weight: bold;
        color: #333333;
      }
      span{
        color: #999999;
        font-size: .24rem;
      }
    }
    .jb{
      width: 1.08rem;
      height: .56rem;
      border: .02rem solid #999999;
      color: #999999;
      font-size: .24rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: .08rem;
    }
  }
  .pl_content{
    background: #ffffff;
    margin-top: .24rem;
    border-radius: .16rem;
    .pltitle{
      padding: .34rem .36rem;
      color: #000000;
      font-size: .36rem;
      position: relative;
      &::before{
        position: absolute;
        content: '';
        width: .08rem;
        height: .32rem;
        border-radius: .04rem;
        background: #ff2a1f;
        top: .4rem;
        left: .2rem;
      }
    }
    .van-action-sheet__content{
      max-height: 10rem;
      overflow: auto;
    }
    .pllist{
      padding-bottom: .66rem;
      .plitem{
        padding: 0 .24rem;
        .user_info{
          display: flex;
          align-items: center;
          .jb{
            width: .5rem;
            font-size: .24rem;
            color: #999999;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .user_name{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: .16rem;
            span{
              color: #333333;
              font-size: .24rem;
              font-weight: 500;
            }
            p{
              color: #999999;
              font-size: .2rem;
            }
          }
        }
        .item_content{
          color: #333333;
          font-size: .24rem;
          margin-top: .22rem;
        }
      }
    }
    .pl{
      padding: 0 .24rem;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: .98rem;
      display: flex;
      justify-content: space-around;
      z-index: 2004;
      background: #ffffff;
      align-items: center;
      input{
        flex: 1;
        height: .66rem;
        background: #f0f0f0;
        border-radius: .6rem;
        color: #666666;
        font-size: .24rem;
        line-height: .66rem;
        padding-left: .32rem;
        margin-right: .26rem;
      }
      .sendpl{
        width: 1.56rem;
        height: .66rem;
        background: #ff2a1f;
        border-radius: .8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .28rem;
        color: #ffffff;
      }
    }
    .nomore{
      font-size: .4rem;
      text-align: center;
      padding-bottom: .34rem;
    }
  }
  .societyvideoFooter{
    background: #ffffff;
    width: 100%;
    color: #333333;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: .96rem;
    padding: 0 .24rem;
    justify-content: space-between;
    z-index: 2002;
    .plinp{
      width: 3.92rem;
      height: .66rem;
      border-radius: .6rem;
      background: #f0f0f0;
      font-size: .24rem;
      padding-left: .32rem;
      color: #333333;
    }
    &>div{
      display: flex;
      align-items: center;
      .num{
        font-size: .32rem;
        margin-left: .18rem;
      }
    }
  }
  .van-popup--bottom.van-popup--round{
    border-radius: unset;
    .plinpu{
      margin-bottom: .24rem;
    }
    .plsendbtn{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 .24rem .24rem;
      font-size: .28rem;
      color: #666666;
      .send{
        width: 1.28rem;
        height: .64rem;
        background: #ff2a1f;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .08rem;
      }
    }
  }
  .fwb_text{
    & img{
      width: 100% !important;
    }
  }
  .good_info{
    display: flex;
    margin: .24rem 0;
    padding: .16rem;
    border-radius: .16rem;
    background: #ffffff;
    .info{
      margin-left: .24rem;
      span{
        font-size: .28rem;
        font-weight: 700;
      }
      p{
        margin-top: .3rem;
        font-size: .24rem;
        color: #FF2A1F;
      }
    }
  }
}
</style>
